<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <script src="./static/static/vue.min.js"></script>
    <script src="./static/static/axios.min.js"></script>
    <!-- 本地引入lib-master -->
    <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
    <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        {{userLoginVo}}
        <el-button type="primary" @click="passwordLogin = false, phoneLogin = true, userLoginVo.loginFlag = 1">密码登录</el-button>
        <el-button type="primary" @click="phoneLogin = false, passwordLogin = true, userLoginVo.loginFlag = 2">手机号登录</el-button>
        <!-- 密码登录 -->
        <el-form :model="userLoginVo" label-width="80px" :hidden="passwordLogin">
            <el-form-item label="用户名" prop="userName">
                <el-input v-model="userLoginVo.userName" placeholder="用户名" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="用户密码" prop="userPwd">
                <el-input v-model="userLoginVo.userPwd" placeholder="用户密码" style="width: 200px;"></el-input>
            </el-form-item>
        </el-form>
        <!-- 手机号登录 -->
        <el-form :model="userLoginVo" label-width="80px" :hidden="phoneLogin">
            <el-form-item label="手机号" prop="userPhone">
                <el-input v-model="userLoginVo.userPhone" placeholder="手机号" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
                <el-input v-model="userLoginVo.code" placeholder="验证码" style="width: 200px;">
                    <el-button slot="append" @click="sendMsg()" :disabled="sendMsgDisabled">{{sendMsgTime}}</el-button>
                </el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="location.href = './user_register.html'">注册</el-button>
            <el-button type="primary" @click="loginBefore()">登录</el-button>
        </span>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                baseUrl: "http://localhost:88/api",
                sendMsgTime: "发送验证码",
                passwordLogin: false,
                phoneLogin: true,
                userLoginVo: {
                    userName: "",
                    userPwd: "",
                    userPhone: "",
                    code: "",
                    loginFlag: 1,
                },
                count: 60,
                sendMsgDisabled: false,
            }
        },
        created() {

        },
        methods: {
            // 发送验证码
            sendMsg() {
                if (this.userLoginVo.userPhone == "") {
                    this.$message.error("请先输入手机号")
                } else if(this.userLoginVo.userPhone.length != 11) {
                    this.$message.error("请输入正确的手机号")
                } else {
                    axios.get(`http://localhost:88/api/user/house-user/sendMsg/${this.userLoginVo.userPhone}`).then(({ data }) => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: '验证码已发送',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {}
                            })
                            set = setInterval(this.codeTime, 1000)
                        } else {
                            this.$message.error(data.msg)
                        }
                    })
                }
            },
            codeTime() {
                this.count--;
                if (this.count > 0) {
                    this.sendMsgDisabled = true;
                    this.sendMsgTime = this.count;
                } else {
                    clearInterval(set)
                    this.sendMsgDisabled = false;
                    this.sendMsgTime = "获取验证码";
                    this.count = 60;
                }
            },
            // 登录之前的判断
            loginBefore() {
                if (this.passwordLogin == false) {
                    if (this.userLoginVo.userName == "") {
                        this.$message.error("请先输入用户名")
                    } else if (this.userLoginVo.userPwd == "") {
                        this.$message.error("密码不能为空")
                    } else {
                        this.userLoginSubmit();
                    }
                } else {
                    if (this.userLoginVo.userPhone == "") {
                        this.$message.error("请先输入手机号")
                    } else if(this.userLoginVo.userPhone.length != 11) {
                        this.$message.error("请输入正确的手机号")
                    } else if (this.userLoginVo.code == "") {
                        this.$message.error("验证码不能为空")
                    } else {
                        this.userLoginSubmit();
                    }
                }
            },
            // 登录提交
            userLoginSubmit() {
                axios.post(`http://localhost:88/api/user/house-user/login?loginFlag=${this.loginFlag}`, this.userLoginVo).then(({ data }) => {
                    if (data && data.code === 0) {
                        this.$message({
                            message: '登录成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                sessionStorage.setItem("user", data.user)
                                location.href = './house_list.html';
                            }
                        })
                    } else {
                        this.$message.error(data.msg)
                    }
                })
            }
        },
    })
</script>

</html>